<!--
 * @Author: wangming
 * @Date: 2021-10-27 15:55:22
 * @LastEditors: wangming
 * @LastEditTime: 2021-10-28 12:52:56
 * @FilePath: /hanma-application-designer-fed/src/pageComponents/__components/hlQrcode/index.vue
 * @Description: 
-->
<template>
  <div :id="config.key" :style="{ textAlign: config.__config.position }">
    <imageLayout
      :operation="isEdit ? '' : 'preview,download'"
      v-if="!!url"
      :src="url"
      :width="config.__config.size"
      :height="config.__config.size"
    >
    </imageLayout>
  </div>
</template>

<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
import QRCODE from "qrcode";
import { Debounce } from "@/utils/decorator";
import imageLayout from "@/components/Imagepreview/image-layout";
export default {
  mixins: [myMixin, vmMixin],
  components: { imageLayout },
  data() {
    return {
      url: "",
    };
  },
  watch: {
    qrstring: {
      handler: function (str) {
        this.getUrl(str);
      },
      immediate: true,
    },
  },
  computed: {
    qrstring() {
      let { showlabel } = this.config.__config;
      if (!!showlabel) {
        let Reg = new RegExp(/\$\{(\w+)\}/g);
        return showlabel.replace(Reg, (res) => {
          let key = res.replace(Reg, "$1");
          return this.form[key] || "";
        });
      }
    },
  },
  methods: {
    @Debounce()
    async getUrl(str) {
      if (!str) return;
      this.url = await QRCODE.toDataURL(str, { margin: 2 });
    },
  },
};
</script>

